@import 'normalize.scss';
@import 'swiper.min.scss';
@import 'base.scss';

//在此放入语法会有提示
@function p2r($size){
    @return ($size/32)*1rem;
}

@mixin bgc($url,$width){
    background: url($url) no-repeat center /100% 100%;
    position: absolute;
    left: 50%;
    margin-left: p2r(-$width/2);
}

@mixin bg($url){
    background: url($url) no-repeat center /100% 100%;
    position: absolute;
}

@mixin size($width,$height){
    width: p2r($width);
    height: p2r($height);
}


.swiper-container {
    width: 100%;
    height: 100%;
    position: absolute;
}

html,body {
    height: 100%;
}
.loading {
    width: 100%;
    height: 100%;
    background-color: #ffece9;
    position: absolute;
    z-index: 3;
    top: 0;
    .rider {
        @include size(154,122);
        @include bg('../images/loading/rider1_.png');
        top: (233/32)*1rem;
        right: (108/32)*1rem;

    }
    .progress {
        @include size(416,32);
        border: 2px solid #373838;
        position: absolute;
        top: p2r(360);
        left: 50%;
        margin-left: p2r(-416/2);
        border-radius: p2r(20);
        background-color: #fff;
    }
    .info {
        @include size(220,28);
        @include bgc('../images/loading/loading-txt.png',220);
        top: p2r(420);

    }
    .logo {
        @include size(162,39);
        @include bgc('../images/loading/waimai-logo.png',162);
        bottom: p2r(118);
    }
    .copyright {
        color: #e0979d;
        font-size: p2r(24);
        position: absolute;
        bottom: p2r(73);
        width: 100%;
        text-align: center;
    }

}
.welcome {
    width: 100%;
    height: 100%;
    background-color: deepskyblue;
    position: absolute;
    z-index: 2;
    top: 0;
    .title {
        @include size(397,224);
        @include bgc('../images/page1/theme-title.png',397);
        top: p2r(42);
        .hello {
            width: (75/32)*1rem;
            height: (70/32)*1rem;
            position: absolute;
            background: url('../images/page1/hello.png') no-repeat center /100% 100%;
            top: (20/32)*1rem;
            right: (8/32)*1rem;
        }
    }
    .cloud {
        @include size(640,672);
        @include bg('../images/page1/clouds.png');
        bottom: 0;
    }
    .bear-box {
        z-index: 1;
        @include size(167,279);
        position: absolute;
        bottom: p2r(346);
        left: 50%;
        margin-left: p2r(-167/2);
        .bear {
            width: 100%;
            height: 100%;
            background: url('../images/page1/rider2.png') no-repeat center /100% 100%;
        }
        .smoke {
            @include size(167,32);
            @include bg('../images/page1/jet1.png');
            bottom: 0;
        }
    }
    .grass1 {
        @include size(640,396);
        @include bg('../images/page1/grass1.png');
       bottom: 0; 
    }
    .grass2 {
        @include size(640,228);
        @include bg('../images/page1/grass2.png');
       bottom: 0; 
     }
     .tree {
        @include size(599,72);
        @include bgc('../images/page1/trees.png',599);
        bottom: p2r(352);

     }
     .t-btn {
        @include size(208,208);
         position: absolute;
         bottom: p2r(86);
         left: 50%;
         margin-left: p2r(-208/2);
         display: flex;
         justify-content: center;
         align-items: center;
         .circle1 {
             width: 100%;
             height: 100%;
            @include bg('../images/page1/circle1.png');
         }
         .circle2 {
            width: 100%;
            height: 100%;
           @include bg('            ../images/page1/circle2.png');
         }
         .btn {
            @include size(124,113);
            @include bg('../images/page1/bear-btn-pre.png');
             
         }

     }
}
.page1 {
    background-color: #b38651;
    .title {
        position: absolute;
        left: p2r(32);
        top: p2r(32);
        padding-left: p2r(20);
        h3 {
            color: #fff;
            font-size: p2r(64);
        }
        p {
            margin-top: p2r(12);
           color: #fff;
           font-size: p2r(24);
        }
        .line{
            background-color: #fff;
            width: p2r(5);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .scroll-page1 {
        .bg {
            @include size(576,573);
            @include bgc('../images/page2/bg1.png',576);
            bottom: p2r(252);
        }
        .person {
            z-index: 1;
            @include bgc('../images/page2/front1.png',439);
            @include size(439,349 );
            bottom: p2r(290);
            .files {
                 @include size(85,50);
                position: absolute;
                bottom: p2r(104);
                background-image: url('../images/page2/papers.png');
                background-repeat: no-repeat;
                background-position: right bottom;
                background-size: p2r(115) p2r(114);
                // background:  url('../images/page2/papers.png') no-repeat right bottom p2r(115) p2r(114);
                .paper1 {
                    @include size(86,26);
                    position: absolute;
                    bottom: p2r(45);
                    left: p2r(-70);
                    background-image: url('../images/page2/papers.png');
                    background-repeat: no-repeat;
                    background-position: 0 p2r(-32);
                    background-size: p2r(115) p2r(114);
                }
                .paper2 {
                    @include size(64,20);
                    position: absolute;
                    bottom: p2r(80);
                    right: 0;
                    background-image: url('../images/page2/papers.png');
                    background-repeat: no-repeat;
                    background-position: p2r(-45) 0;
                    background-size: p2r(115) p2r(114);
                }
            }

        }
        .info-container {
            z-index: 1;
            @include size(363,119 );
            @include bgc('../images/page2/txt-bubbl.png',363 );
            bottom: p2r(140);
            right: p2r(140);
            display: flex;
            justify-content: center;
            align-items: center;
            .info {
                @include size(250,31 );
                @include bg('../images/page2/txt-work.png');
            }
            
        }
       
    }
    .scroll-page2 {
        .bg {
            @include size(582,520);
            @include bgc('../images/page2/bg2.png',582);
            bottom: p2r(252);
        }
        .person {
            @include bgc('../images/page2/relax.png',436);
            @include size(436,332 );
            bottom: p2r(270);
            z-index: 1;
            .leg1 {
                @include size(113,24);
                @include bg('../images/page2/leg1.png');
                bottom: p2r(110);
                left: p2r(195);
            }
            .leg2 {
                @include size(85,71);
                @include bg('../images/page2/leg2.png');
                bottom: p2r(120);
                left: p2r(193);
            }
        }
        .info-container {
            @include size(363,119 );
            @include bgc('../images/page2/txt-bubbl.png',363 );
            bottom: p2r(140);
            right: p2r(140);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            .info {
                @include size(224,31 );
                @include bg('../images/page2/txt-life.png');
                
            }
            
        }
       
    }
    .scroll-page3 {
        .bg {
            @include size(561,516);
            @include bgc('../images/page2/bg3.png',561);
            bottom: p2r(270);
        }
        .person {
            @include bgc('../images/page2/person.png',503);
            @include size(503,229 );
            bottom: p2r(300);
            z-index: 1;
            .word1 {
                @include bg('../images/page2/word1.png');
                @include size(92,83 );
                left: p2r(7);
                bottom: p2r(194);
            }
            .word2 {
                @include bg('../images/page2/word2.png');
                @include size(77,70 );
                left: p2r(115);
                bottom: p2r(245);
            }
            .word3 {
                @include bg('../images/page2/word3.png');
                @include size(115,104 );
                right: p2r(130);
                bottom: p2r(220);
            }
            .word4 {
                @include bg('../images/page2/word4.png');
                @include size(79,73 );
                right: p2r(12);
                bottom: p2r(230);
            }
        }
        .info-container {
            @include size(363,119 );
            @include bgc('../images/page2/txt-bubbl.png',363 );
            bottom: p2r(140);
            right: p2r(140);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            .info {
                @include size(220,30 );
                @include bg('../images/page2/txt-res.png');               
            }
            
        }
       
    } 
    .bear {
            @include size(178,134);
            @include bg('../images/page2/bear1.png');
            right: p2r(38);
            bottom: 0;
    }
    .sphere {
            @include size(640,356);
            @include bgc('../images/page2/sphere1.png',640 );
            bottom: 0;
    }
}
.page2 {
    background-color: #ee4143;
    .title {
        position: absolute;
        left: p2r(32);
        top: p2r(32);
        padding-left: p2r(20);
        h3 {
            color: #fff;
            font-size: p2r(64);
        }
        p {
            margin-top: p2r(12);
           color: #fff;
           font-size: p2r(24);
        }
        .line{
            background-color: #fff;
            width: p2r(5);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .bg {
        @include size(592,490 );
        @include bgc('../images/page3/bg4_.png',592);
        bottom: p2r(330);
    }
    .bear {
        @include size(227,336);
       background-image: url('../images/page3/bear2.png');
       background-repeat: no-repeat;
       background-position: p2r(-103) p2r(-96);
       background-size: p2r(368) p2r(427);
       bottom: p2r(310);
       position: absolute;
       left: 50%;
       margin-left: p2r(-227/2);
       .face1 {
           @include size(102,102);
           @include bg('../images/page3/face1.png');
           left: p2r(-102);
           top: 0;
       }
       .face2 {
        @include size(101,102);
        @include bg('../images/page3/face2.png');
        right: p2r(-101/2);
        top: p2r(-102);
       }
       .hand-left {
           @include size(74,77);
           @include bg('../images/page3/hand-left_.png');
           left: p2r(30);
           top: p2r(180);
       }
       .hand-right {
        @include size(74,77);
        @include bg('../images/page3/hand-right.png');
        right: p2r(30);
        top: p2r(180);
    }
    }
    .sphere {
        @include size(640,356 );
        @include bgc('../images/page3/sphere2.png',640 );
        bottom: 0;
    }
    .table {
        @include size(514,258 );
        @include bgc('../images/page3/table.png',514 );
        bottom: p2r(140);
    }
    .foods {
        @include size(354,152 );
        @include bgc('../images/page3/foods.png',354 );
        bottom: p2r(330);
    }
}
.page3 {
    background-color: #DD8A03;
    .title {
        position: absolute;
        left: p2r(32);
        top: p2r(32);
        padding-left: p2r(20);
        h3 {
            color: #fff;
            font-size: p2r(64);
        }
        p {
            margin-top: p2r(12);
           color: #fff;
           font-size: p2r(24);
        }
        .line{
            background-color: #fff;
            width: p2r(5);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .bg {
        @include size(592,580 );
        @include bgc('../images/page4/bg5.png',592);
        bottom: p2r(300);
    }
    .bear {
       @include size(206,321);
       @include bgc('../images/page4/bear3.png',206);
       bottom: p2r(195);

    }
    .sphere {
        @include size(640,356 );
        @include bgc('../images/page4/sphere3.png',640 );
        bottom: 0;
    }
    .license {
        @include bg('../images/page4/license.png');
        @include size(197,140 );
        left: p2r(40);
        bottom: p2r(500);
    }
    .oil {
        @include bgc('../images/page4/oil.png',205);
        @include size(205,107 );
        bottom: p2r(660);
    }
    .waimai {
        @include bg('../images/page4/evil2.png');
        @include size(198,163 );
        right: p2r(30);
        bottom: p2r(480);
    }
}
.page4 {
    background-color: #3fa100;
    .title {
        position: absolute;
        left: p2r(32);
        top: p2r(32);
        padding-left: p2r(20);
        h3 {
            color: #fff;
            font-size: p2r(64);
        }
        p {
            margin-top: p2r(12);
           color: #fff;
           font-size: p2r(24);
        }
        .line{
            background-color: #fff;
            width: p2r(5);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .bg {
        @include size(588,333 );
        @include bgc('../images/page5/bg6.png',588);
        bottom: p2r(300);
    }
    .bear {
       @include size(309,325);
       @include bgc('../images/page5/bear4.png',309);
       bottom: p2r(170);
       left: p2r(355);
    }
    .sphere {
        @include size(640,356 );
        @include bgc('../images/page5/sphere4.png',640 );
        bottom: 0;
    }
    .card1 {
        @include bg('../images/page5/card1.png');
        @include size(160,175 );
        left: p2r(32);
        bottom: p2r(435);
    }
    .card2 {
        @include bg('../images/page5/card2.png');
        @include size(161,209 );
        bottom: p2r(530);
        left: p2r(240);
    }
    .card3 {
        @include bg('../images/page5/card3.png');
        @include size(167,184 );
        right: p2r(45);
        bottom: p2r(420);
    }
}
.page5 {
    background-color: #0098cf;
    .title {
        position: absolute;
        left: p2r(32);
        top: p2r(32);
        padding-left: p2r(20);
        h3 {
            color: #fff;
            font-size: p2r(64);
        }
        p {
            margin-top: p2r(12);
           color: #fff;
           font-size: p2r(24);
        }
        .line{
            background-color: #fff;
            width: p2r(5);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .bg {
        @include size(594,493 );
        @include bgc('../images/page6/bg7.png',594);
        bottom: p2r(300);
    }
    .bear {
       @include size(230,390);
       @include bgc('../images/page6/rider2.png',230);
       bottom: p2r(175);
        .smoke {
            @include size(114,26);
            @include bgc ('../images/page6/shadow.png',114);
            bottom: 0;
        }
    }
    .cloud {
        @include size(432,160);
       @include bgc ('../images/page6/weather-cloud.png',432);
       bottom: 20rem;
      }
    .sphere {
        @include size(640,356 );
        @include bgc('../images/page6/sphere5.png',640 );
        bottom: 0;
    }

}
.page6 {
    background-color: #b527a0;
    .title {
        position: absolute;
        left: p2r(32);
        top: p2r(32);
        padding-left: p2r(20);
        h3 {
            color: #fff;
            font-size: p2r(64);
        }
        p {
            margin-top: p2r(12);
           color: #fff;
           font-size: p2r(24);
        }
        .line{
            background-color: #fff;
            width: p2r(5);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .bg {
        @include size(588,333 );
        @include bgc('../images/page7/bg8.png',588);
        bottom: p2r(300);
    }
    .bear {
       @include size(285,328);
       @include bgc('../images/page7/bear5.png',285);
       bottom: p2r(200);
       .gift-box {
           position: absolute;
           top: 0;
           left: 50%;
           .gift1 {
               @include size(35,29 );
               @include bgc('../images/page7/gift1.png',35);
               transform:  rotateZ(29deg) translateY(p2r(240))
            }
           .gift2 {
            @include size(72,64 );
            @include bgc('../images/page7/gift2.png',72);
            transform:  rotateZ(29*2deg) translateY(p2r(240))
            }
            .gift3 {
                @include size(91,73 );
                @include bgc('../images/page7/gift3.png',91);
                transform:  rotateZ(29*3deg) translateY(p2r(240))
            }
            .gift4 {
                @include size(99,65 );
                @include bgc('../images/page7/gift4.png',99);
                transform:  rotateZ(29*4deg) translateY(p2r(240))
            }
            .gift5 {
                @include size(107,80 );
                @include bgc('../images/page7/gift5.png',107);
                transform:  rotateZ(29*5deg) translateY(p2r(240))
            }
            .gift6 {
                @include size(107,80 );
                @include bgc('../images/page7/gift6.png',107);
                transform:  rotateZ(29*6deg) translateY(p2r(240))
            }
            .gift7 {
                @include size(88,64 );
                @include bgc('../images/page7/gift7.png',88);
                transform:  rotateZ(29*7deg) translateY(p2r(240))
            }
            .gift8 {
                @include size(78,50 );
                @include bgc('../images/page7/gift8.png',78);
                transform:  rotateZ(29*8deg) translateY(p2r(240))
            }
            .gift9 {
                @include size(93,79 );
                @include bgc('../images/page7/gift9.png',93);
                transform:  rotateZ(29*9deg) translateY(p2r(240))
            }
            .gift10 {
                @include size(49,37 );
                @include bgc('../images/page7/gift10.png',49);
                transform:  rotateZ(29*10deg) translateY(p2r(240))
            }
            .gift11 {
                @include size(51,31 );
                @include bgc('../images/page7/gift11.png',51);
                transform:  rotateZ(29*11deg) translateY(p2r(240))
            }
            .gift12 {
                @include size(37,23 );
                @include bgc('../images/page7/gift12.png',37);
                transform:  rotateZ(29*12deg) translateY(p2r(240))
            }
       }
    }
    .sphere {
        @include size(640,356 );
        @include bgc('../images/page7/sphere6.png',640 );
        bottom: 0;
    }
}
.page7 {
    background-color: #19072a;
    .title {
        position: absolute;
        left: p2r(32);
        top: p2r(32);
        padding-left: p2r(20);
        h3 {
            color: #fff;
            font-size: p2r(64);
        }
        p {
            margin-top: p2r(12);
           color: #fff;
           font-size: p2r(24);
        }
        .line{
            background-color: #fff;
            width: p2r(5);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .bear {
       @include size(276,271);
       @include bg('../images/page8/bear6.png');
       bottom: p2r(280);
       left: p2r(230);
    }
    .sphere {
        @include size(640,384 );
        @include bgc('../images/page8/sphere7.png',640 );
        bottom: 0;
    }
    .streetLight {
        @include size(80,443 );
        @include bg('../images/page8/streetlight.png');
        bottom: p2r(300);
        left: p2r(240);
        .light {
            @include size(437,427);
            @include bg('../images/page8/lamplight.png');
            top: p2r(10);
            left: p2r(-140);
        }
    }
    .motoBike {
        @include size(200,137 );
        @include bg('../images/page8/moto.png');
        bottom: p2r(335);
        left: p2r(125);
    }
    .share {
        @include size(379,113 );
        @include bgc('../images/page8/share.png',379 );
        bottom: p2r(140);
    }
    .info {
        position: absolute;
        font-size: p2r(24);
        color: #b579d6;
        bottom: p2r(70);
        width: 100%;
        text-align: center;
    }
}

@keyframes steps {
    to {
        width: 100%;
    }
}
@keyframes rdMove {
    10% {transform: translateX(p2r(-29*1)) translateY(p2r(-10));}
    20% {transform: translateX(p2r(-29*2)) translateY(p2r(10));}
    30% {transform: translateX(p2r(-29*3)) translateY(p2r(-10));}
    40% {transform: translateX(p2r(-29*4)) translateY(p2r(10));}
    50% {transform: translateX(p2r(-29*5)) translateY(p2r(-10));}
    60% {transform: translateX(p2r(-29*6)) translateY(p2r(10));}
    70% {transform: translateX(p2r(-29*7)) translateY(p2r(-10));}
    80% {transform: translateX(p2r(-29*8)) translateY(p2r(10));}
    90% {transform: translateX(p2r(-29*9)) translateY(p2r(-10));}
    100%{transform: translateX(p2r(-29*10)) translateY(p2r(10));}
}
// 开始制作动画
.loading {
    .progress {
        .step {
            width: 20%;
            height: 100%;
            border-radius: p2r(20);
            background-color: #fc2e4d;
            position: absolute;
            right: 0;
            
        }
    }
    
}
.loading.animate {
    .progress {
        .step {
            animation: steps 1.5s linear forwards;
        }
    }
    .rider {
        animation: rdMove 1.5s linear forwards;
    }
}

@keyframes grass1 {
    from {}
    to {
        height: p2r(396);
    }
}
@keyframes grass2 {
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes trees {
    80% {
        opacity: 1;
        transform: translateY(20%);
    }
    90% {
        opacity: 1;
        transform: translateY(-20%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes t-btn {
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes circle2 {
    to {
        transform: rotate(360deg);
    }
}
@keyframes bear-box {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes updown {
    0% {
        transform: none;
    }
    50% {
        transform: translateY(-8%);
    }
    100% {
        transform: none;
    }
}
@keyframes smoke {
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes title {
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes hello {
    0%{
        transform: scale(0,0);
    }
    80% {
        transform: scale(1.5,1.5);        
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
@keyframes bearDispear {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        transform: translateY(100%) scale(1.5,1.5);
        opacity: 0;
    }
}

.welcome {
    .grass1 {
        height: p2r(20);
    }
    .grass2 {
        opacity: 0;
        transform: scale(2,1);
    }
    .tree {
        transform: translateY(-100%);
        opacity: 0;
    }
    .t-btn {
        transform: scale(0,0);
        opacity: 0;
    }
    .bear-box {
        opacity :0;
        transform: translateY(-100%);
        .bear {
            transform: translateY(-8%);
        }
        .smoke {
            transform: scale(0,0);
            opacity: 0;
        }
    }
    .title {
        transform: translateY(-200%);
        opacity: 0;
        .hello {
            opacity: 0;
        }
    }
    
}

.welcome.animate {
    .grass1 {
        animation: grass1 .5s linear forwards;
    }
    .grass2 {
        animation: grass2 .5s .5s linear forwards;
    }
    .tree {
        animation: trees .5s 1s linear forwards;
    }
    .t-btn {
        animation: t-btn .5s .5s linear forwards;
        .circle2 {
            animation: circle2 1s linear infinite;
        }
    }
    .bear-box {
        animation: bear-box .5s 1.5s linear forwards;
        .bear {
            animation: updown .5s 2s infinite linear;
        }
        .smoke {
            animation: smoke .5s 2s infinite;
        }
    }
    .title {
        animation: title .5s 2s linear forwards;
        .hello {
            animation: hello .5s 2.5s linear forwards;
        }
    }
}

@keyframes right2left {
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes h100 {
    to {
        height: 100%;
    }
}

.title {
    h3 {
        transform: translateX(100%);
        opacity: 0;
    }
    p {
        transform: translateX(100%);
        opacity: 0;
    }
    .line {
        height: 0% !important;
    }
}

@keyframes rotateInAndOut {
   25%{
       transform: rotateZ(-5deg);
       opacity: 1;
   }
   30%{
    transform: rotateZ(0deg);
    opacity: 1;
   }
   65%{
    transform: rotateZ(0deg);
    opacity: 1;
   }
   70%{
    transform: rotateZ(5deg);
    opacity: 1;
    }
    100%{
        transform: rotateZ(-90deg);
        opacity: 0;
    }   
}
@keyframes rotateInNotOut {
    50%{
        transform: rotateZ(-5deg);
        opacity: 1;
    }
    100%{
     transform: rotateZ(0deg);
     opacity: 1;
    }
 }
@keyframes UpDownLeftRight{
    20%{
        transform: translate(5%,0);
    }
    40%{
        transform: translate(0,5%);
    }
    60%{
        transform: translate(-5%,0);
    }
    80%{
        transform: translate(0,-5%);
    }
    100%{
        transform: none;
    }
}
@keyframes left2Right {
    30%{
        transform: translateX(-50%);
    }
    60%{
        transform: translateX(50%);
    }
    90%{
        transform: translate(-50%);
    }
    100%{
        transform: none;
    }
}
@keyframes leg {
     to {
         transform: none;
     }
}


.swiper-slide.animate {
    .title {
        h3 {
            animation: right2left .5s linear forwards;
        }
        p {
            animation: right2left .5s linear forwards;
        }
        .line {
            animation: h100 .5s .5s linear forwards;
        }
    }
}

@keyframes hands {
    33% {
        transform: rotateZ(5deg)
    }
    66% {
        transform: rotateZ(-5deg)
    }
    100% {
        transform: none;
    }
}

.page1{
    .scroll-page1 {
        .bg{
            transform-origin: 50% 200%;
            opacity: 0;
            transform: rotateZ(90deg);
        }
        .person{ 
            transform-origin: 50% 200%;
            opacity: 0;
            transform: rotateZ(90deg);
        }
        .info-container{
            transform-origin: right bottom;
            transform: rotateZ(90deg);
            opacity: 0;
        }
    }
    .scroll-page2 {
        .bg{
            transform-origin: 50% 200%;
            opacity: 0;
            transform: rotateZ(90deg);
        }
        .person{ 
            transform-origin: 50% 200%;
            opacity: 0;
            transform: rotateZ(90deg);
            .leg2 {
                transform-origin: left bottom;
                transform: rotateZ(30deg)
            }
        }
        .info-container{
            transform-origin: right bottom;
            transform: rotateZ(90deg);
            opacity: 0;
        }
    }
    .scroll-page3 {
        .bg{
            transform-origin: 50% 200%;
            opacity: 0;
            transform: rotateZ(90deg);
        }
        .person{ 
            transform-origin: 50% 200%;
            opacity: 0;
            transform: rotateZ(90deg);
        }
        .info-container{
            transform-origin: right bottom;
            transform: rotateZ(90deg);
            opacity: 0;
        }
    }
}
.page1.animate {
    .scroll-page1 {
        .bg{
           animation: rotateInAndOut 2s forwards;
        }
        .person{ 
            animation: rotateInAndOut 2s .5s forwards;
            .files{
                .paper1 {
                    animation: left2Right 2s .5s infinite linear
                }
                .paper2 {
                    animation: left2Right 1s .5s infinite linear
                }
            }
        }
        .info-container{
            animation: rotateInAndOut 2s 1s forwards;
        }
    }
    .scroll-page2 {
        .bg{
           animation: rotateInAndOut 2s 3s forwards;
        }
        .person{ 
            animation: rotateInAndOut 2s 3.5s forwards;
            .leg2 {
                animation: leg 1s 4s linear forwards;
            }
        }
        .info-container{
            animation: rotateInAndOut 2s 4s forwards;
        }
    }   
    .scroll-page3 {
        .bg{
           animation: rotateInNotOut .8s 6s forwards;
        }
        .person{ 
            animation: rotateInNotOut .8s 6.5s forwards;
            .word1{
                animation: UpDownLeftRight 1s infinite linear;
            }
            .word2{
                animation: UpDownLeftRight .6s infinite linear;
            }
            .word3{
                animation: UpDownLeftRight .8s infinite linear;
            }
            .word4{
                animation: UpDownLeftRight .3s infinite linear;
            }
        }
        .info-container{
            animation: rotateInNotOut .8s 7s forwards;
        }
    }
    
}


.page2 {
    .bg{
        transform-origin: 50% 200%;
        opacity: 0;
        transform: rotateZ(90deg);
    }
    .table {
        transform: translateY(-100%);
        opacity: 0;
    }
    .bear {
        transform: translateY(100%);
        opacity: 0;
        .face1 {
            transform: scale(0,0);
            opacity: 0;
        }
        .face2 {
            transform: scale(0,0);
            opacity: 0;
        }
        .hand-left {
            transform-origin: left bottom;
        }
        .hand-right {
            transform-origin: right bottom;
        }
    }
    .foods {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.page2.animate {
    .bg{
        animation: rotateInNotOut 1s .5s forwards;
     }
     .table {
         animation: title 1s 1.5s linear forwards;
     }
     .bear {
        animation: title .5s 2.5s linear forwards;
        .face1 {
            animation: hello 1s 3.5s linear forwards
        }
        .face2 {
            animation: hello 1s 3.5s linear forwards
        }
        .hand-left {
            animation: hands .5s 2.5s linear infinite
        }
        .hand-right {
            animation: hands .5s 2.5s linear infinite
        }
    }
    .foods {
        animation: title .5s 3s linear forwards;
    }

}

.page3 {
    .bg{
        transform-origin: 50% 200%;
        opacity: 0;
        transform: rotateZ(90deg);
    }
    .bear {
        opacity: 0;
        transform: translateY(-100%);
    }
    .bear-box {
        .bear1 {
            @include size(251,335 );
            @include bgc('../images/page4/bear3-1-1.png',251);
            bottom: 6.09375rem;
            opacity: 0;
        }
        .bear2 {
            @include size(215,313 );
            @include bgc('../images/page4/bear3-2-1.png',215);
            bottom: 6.09375rem;
            opacity: 0;
        }
        .bear3 {
            @include size(290,321 );
            @include bgc('../images/page4/bear3-3-1.png',290);
            bottom: 6.09375rem;
            opacity: 0;
        }
    }
    .normal-box {
        .license {
            opacity: 0;
        }
        .oil {
            opacity: 0;
        }
        .waimai {
            opacity: 0;
        }
    }
    .hit-box {
        .license {
            @include bg('../images/page4/license1.png');
            @include size(228,151 );
            left: p2r(40);
            bottom: p2r(500);
            opacity: 0;
        }
        .oil {
            @include bgc('../images/page4/oil1.png',231);
            @include size(231,156 );
            bottom: p2r(660);
            opacity: 0;
        }
        .waimai {
            @include bg('../images/page4/evil21.png');
            @include size(211,173 );
            right: p2r(30);
            bottom: p2r(480);
            opacity: 0;
        }
    }
}

.page3.animate {
    .bg {
        animation: rotateInNotOut .5s .5s forwards
    }
    .bear {
        animation: title .8s 1s linear forwards
    }
    .normal-box {
        .license {
            animation: hello .8s 2s forwards,UpDownLeftRight .7s 2.8s linear infinite;
        }
        .oil {
            animation: hello .8s 2s forwards,UpDownLeftRight .5s 2.8s linear infinite;
        }
        .waimai {
            animation: hello .8s 2s forwards,UpDownLeftRight .3s 2.8s linear infinite;
        }
    }
}

.page4 {
    .bg{
        transform-origin: 50% 200%;
        opacity: 0;
        transform: rotateZ(90deg);
    }
    .bear {
        opacity: 0;
        transform: translateY(-100%);
    }
    .card1 {
        transform: scale(0,0);
        opacity: 0;
    }
    .card2 {
        transform: scale(0,0);
        opacity: 0;
    }
    .card3 {
        transform: scale(0,0);
        opacity: 0;
    }
}

.page4.animate {
    .bg {
        animation: rotateInNotOut .5s .5s forwards
    }
    .bear {
        animation: title .8s 1s linear forwards
    }
    .card1 {
        animation: hello 1s 1.8s linear forwards
    }
    .card2 {
        animation: hello 1s 1.8s linear forwards
    }
    .card3 {
        animation: hello 1s 1.8s linear forwards
    }


}

@keyframes t2left {
    0%{
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-200%,1000%)
    }
}
@keyframes t2right {
    0%{
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(200%,1000%)
    }
}

.page5 {
    .bg{
        transform-origin: 50% 200%;
        opacity: 0;
        transform: rotateZ(90deg);
    }
    .bear {
        opacity: 0;
        transform: translateY(-100%);
        .smoke {
            transform: scale(0,0);
        }
    }
    .cloud {
        opacity: 0;
        .snow {
            opacity: 0;
            @include size(32,32);
            @include bg('../images/page6/snow-piece.png');
            bottom: 0;
        }
        .snow:nth-of-type(2){
            left: p2r(70);
        }
        .snow:nth-of-type(3){
            left: p2r(70*2);
        }
        .snow:nth-of-type(4){
            left: p2r(70*3);
        }
        .snow:nth-of-type(5){
            left: p2r(70*4);
        }
        .snow:nth-of-type(6){
            left: p2r(70*5);
        }
    }
}

.page5.animate {
    .bg {
        animation: rotateInNotOut .5s .5s forwards
    }
    .bear {
        animation: title .8s 1s linear forwards,updown .5s 1.8s linear infinite;
        .smoke {
            animation: hello .5s 1.8s linear infinite;
        }   
    }
    .cloud {
        animation: hello 1s forwards,UpDownLeftRight 2s 1s linear infinite;
        .snow:nth-of-type(1){
            animation: t2right 1s 1s linear infinite;
        }
        .snow:nth-of-type(2){
            animation: t2right .6s 1s linear infinite;
        }
        .snow:nth-of-type(3){
            animation: t2right .8s 1s linear infinite;
        }
        .snow:nth-of-type(4){
            animation: t2left 1.3s 1s linear infinite;
        }
        .snow:nth-of-type(5){
            animation: t2left .3s 1s linear infinite;
        }
        .snow:nth-of-type(6){
            animation: t2left .5s 1s linear infinite;
        }
    }
}

@keyframes giftRotate {
    from {
        transform: none;
    }
    to {
        opacity: 1;
    }
}
@keyframes big2sm {
    from {

    }
    to {
        transform: scale(0,0);
        opacity: 0;
    }
}

.page6 {
    .bg{
        transform-origin: 50% 200%;
        opacity: 0;
        transform: rotateZ(90deg);
    }
    .bear {
        opacity: 0;
        transform: translateY(-100%);
    }
    .gift-box div{
        opacity: 0;
    }
}

.page6.animate {
    .bg {
        animation: rotateInNotOut .5s .5s forwards
    }
    .bear {
        animation: title .8s 1s linear forwards;
    }
    .gift-box div{
        animation: giftRotate 1.5s 1.8s linear forwards;
    }
    .gift-box {
        animation: circle2 1.5s 3.3s 2 linear,
        big2sm 1s 6.3s linear forwards;
    }
}

.audioControl {
    @include size(36,36);
    @include bg('../images/pause.png');
    right: p2r(32);
    top: p2r(32);
    z-index: 999;
}



